<template>
  <div style="position: absolute; top: 62px" class="dashboard-container">
    <div id="menus" v-permission="['superAdmin']">
      <div class="menu">
        <img
          style="margin-top: 50px; margin-left: 30px"
          src="~@/assets/images/company.png"
        />
        <h2 id="count">平台注册的企业数：</h2>
        <div id="countNumber">
          <h2>{{ companyCount }}</h2>
        </div>
      </div>
      <div class="menu">
        <img
          style="margin-top: 50px; margin-left: 30px"
          src="~@/assets/images/deal.png"
        />
        <h2 id="deal">待审核的企业申请：</h2>
        <div id="dealNumber">
          <h2>{{ dealCompany }}</h2>
        </div>
      </div>
      <div class="menu">
        <img
          style="margin-top: 50px; margin-left: 30px"
          src="~@/assets/images/warming.png"
        />
        <h2 id="warming">驳回的企业申请：</h2>
        <div id="warmingNumber">
          <h2>{{ warming }}</h2>
        </div>
      </div>
    </div>
    <div id="adminmuns" v-permission="['admin', 'hr', 'manger']">
      <div class="hrmun" @click="toother('/employee/index')">
        <img class="menuImage" src="~@/assets/images/employee.png" />
        <h2 id="allCount">当前在职总人数：{{ allCount }}</h2>
      </div>
      <div class="hrmun" @click="toother('/background/index')">
         <img class="menuImage" src="~@/assets/images/database.png" />
         <h2 id="backgroundItem">已完善的背调信息数：{{allCount}}</h2>
      </div>
      <div class="hrmun">
        <img class="menuImage" src="~@/assets/images/evaluate.png" />
        <h2 id="evaluate">本季度待评价的员工数：{{evaluate}}</h2>
      </div>
    </div>
    <div id="charts" v-permission="['admin', 'hr', 'manger']"></div>
    <div id="rate" v-permission="['admin', 'hr', 'manger']">
      <div id="ganderRate"></div>
      <div id="ageRate"></div>
    </div>
    <div id="approve" v-permission="['superAdmin']">
      <h2 style="text-align: center; display: block; margin-bottom: 20px">
        待审核的申请
      </h2>
      <div id="list">
        <ul class="infinite-list" v-infinite-scroll="load">
          <li v-for="(i, key) in approveList" class="infinite-list-item">
            <div class="approve">
              <span>申请序号：</span>
              {{ i.id }}&nbsp;&nbsp;
              <span>申请人：</span>
              {{ i.name }}&nbsp;&nbsp;
              <span>公司地址：</span>
              {{ i.companyAddress }}
            </div>
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              class="editapprove"
              @click="openApprove(key)"
              >编辑</el-button
            >
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      title="审核企业信息"
      width="60%"
      center
      :visible.sync="dialogFormVisible"
      modal
    >
      <el-form :model="form" label-position="right" ref="form" :rules="rules">
        <el-form-item
          label="序号："
          required="true"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.id"
            disabled
            style="width: 200px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="申请人"
          required="true"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="form.name"
            disabled
            style="width: 200px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="企业名称"
          required="true"
          prop="companyName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.companyName"
            disabled
            style="width: 200px"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="企业地址"
          required="true"
          prop="companyAddress"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            v-model="form.companyAddress"
            style="width: 300px"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item
          label="申请人电话"
          required="true"
          prop="mobile"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.mobile"
            disabled
            style="width: 200px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="工商信息"
          required="true"
          :label-width="formLabelWidth"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :preview-src-list="srcList"
          >
          </el-image>
        </el-form-item>
      </el-form>
      <div id="rightform">
        <el-form :model="form" label-position="right" :rules="rules" ref="form">
          <el-form-item
            label="审核人"
            required="true"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="name" disabled></el-input>
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            label="审核时间"
            prop="date"
          >
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="date"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            required="true"
            :label-width="formLabelWidth"
            label="审核结果"
            prop="status"
          >
            <el-radio v-model="status" label="1" @change="pass()"
              >通过</el-radio
            >
            <el-radio v-model="status" label="2" @change="backapprove()"
              >驳回</el-radio
            >
          </el-form-item>
          <el-form-item
            :label-width="formLabelWidth"
            label="备注"
            v-show="remarkable"
            prop="remark"
          >
            <el-input
              type="textarea"
              v-model="form.remark"
              style="width: 300px"
              placeholder="请填写驳回原因"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">提 交</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import business from "@/assets/images/business.jpg";
import api from "@/api/index";
import router from "@/router";
import * as echarts from "echarts";
import indexCharts from "@/js/indexCharts";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
    ...mapGetters(["roles"]),
  },
  data() {
    return {
      date: "",
      remarkable: false,
      deptList: [],
      status: "1",
      count: 0,
      companyCount: 0,
      approveList: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      roleName: "",
      dealCompany: 0,
      allCount: 0,
      warming: 0,
      form: {
        id: "",
        companyName: "",
        remark: "",
        name: "",
        companyAddress: "",
        mobile: "",
        imageUrl: "",
        status: "",
      },
      evaluate:12,
      url: business,
      srcList: [business],
      rules: {
        // date: [{ required: true, message: "请选择审核时间", trigger: "blur" }],
        remark: [
          {
            required: true,
            message: "公司审核未通过，请输入理由",
            trigger: true,
          },
        ],
      },
      option: {
        title: {
          x: "center",
          y: "top",
          text: "部门员工分布图",
        },
        tooltip: {},
        legend: {
          data: ["员工数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "员工",
            type: "bar",
            barWidth: 50,
            data: [],
          },
          {
            name: "员工",
            type: "line",
            data: [],
          },
        ],
      },
      genderRateOption: {
        title: {
          text: "性别比例",
          x: "center",
          y: "top",
        },
        tooltip: {},
        legend: {
          bottom: "bottom",
          orient: "vertical",
          textStyle: {
            fontSize: "20px",
          },
        },
        series: [
          {
            type: "pie", // 设置图表类型为饼图
            radius: "70%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [],
            color: ["#2828FF", "#FF95CA", "#7B7B7B"],
          },
        ],
      },
      ageOption: {
        title: {
          text: "年龄分布",
          x: "center",
          y: "top",
          textStyle: {
            fontSize: "20px",
          },
        },
        tooltip: {},
        legend: {
          data: ["员工年龄"],
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          data: ["56~65岁", "46-55岁", "36-45岁", "26-35岁", "18-25岁"],
          axisLabel: {
            textStyle: {
              fontSize: "18",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "40px",
            color: "#1890FF",
            data: [],
            itemStyle: {
              nomal: {
                label: {
                  show: true,
                  position: "bottom",
                  textStyle: {
                    fontSize: "18px",
                  },
                },
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    //提交审核信息
    submit() {
      let remark;
      if (this.form.remarks == "") {
        remark = "无";
      } else remark = this.form.remarks;
      let submitForn = {
        auditor: this.name,
        auditTime: this.date,
        auditStatus: parseInt(this.status),
        companyId: parseInt(this.form.id),
        remarks: remark,
      };
      api
        .submitApprove(submitForn)
        .then((response) => {
          if (this.status == "1") {
            this.$message({
              message: "已通过" + this.form.companyName + "公司的审核",
              type: "success",
            });
          } else {
            this.$message({
              message: "已驳回" + this.form.companyName + "公司的审核",
              type: "warning",
            });
          }
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          this.$message.error("网络出错");
        });
      setTimeout(() => {
        this.$router.go(0);
      }, 300);
    },
    //审核不通过
    backapprove() {
      this.remarkable = true;
      this.warming++;
    },
    //审核通过
    pass() {
      this.remarkable = false;
      this.$router.go(0);
    },
    load() {
      this.count += 2;
    },
    //获取待审核列表
    getApproveList() {
      api
        .getApprove()
        .then((response) => {
          this.approveList = response.SysCompanyEntity;
          this.dealCompany = this.approveList.length;
        })
        .catch((err) => console.log(err));
    },
    //打开审核面板
    openApprove(id) {
      this.dialogFormVisible = true;
      this.form.id = this.approveList[id].id;
      this.form.companyName = this.approveList[id].companyName;
      this.form.name = this.approveList[id].name;
      this.form.companyAddress = this.approveList[id].companyAddress;
      this.form.mobile = this.approveList[id].mobile;
    },
    //画出部门人数分布图
    drawnDept() {
      var myChart = echarts.init(
        document.getElementById("charts"),
        "indexcharts"
      );
      myChart.setOption(this.option);
    },
    //画出性别比例
    drawGender() {
      var myChart = echarts.init(document.getElementById("ganderRate","indexcharts"));
      myChart.setOption(this.genderRateOption);
    },
    //画出年龄占比
    drawAge() {
      var myChart = echarts.init(
        document.getElementById("ageRate"),
        "indexcharts"
      );
      myChart.setOption(this.ageOption);
    },
    toother(path) {
      this.$router.push({ path: path });
    },
  },
  created() {
    this.roleName = this.roles[0];

    this.$notify({
      title: "欢迎",
      message:
        ("hi",
        { style: "color: teal" },
        "尊敬的：" + this.name + "，欢迎回到人才管理系统"),
    });
    if (this.roleName == "superAdmin") {
      console.log("获取列表");
      this.getApproveList();
      api
        .getCompanyCount()
        .then((response) => {
          this.companyCount = response.count;
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
    } else {
      api
        .getAllDatas()
        .then((response) => {
          this.deptList = response.list;
          let list = this.deptList;
          let nameList = [],
            numberList = [];
          for (let index = 0; index < list.length; index++) {
            const element = list[index];
            nameList.push(element.name);
            numberList.push(element.count);
          }
          this.option.xAxis.data = nameList;
          this.option.series[0].data = numberList;
          this.option.series[1].data = numberList;
          this.drawnDept();
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
      api
        .getcompanyDatas()
        .then((response) => {
          let boy = response.list.boyCount;
          let unknownCount = response.list.unknownCount;
          let girl = response.list.girlCount;
          this.allCount = response.list.allCount;
          this.ageOption.series[0].data.push(response.list.count5);
          this.ageOption.series[0].data.push(response.list.count4);
          this.ageOption.series[0].data.push(response.list.count3);
          this.ageOption.series[0].data.push(response.list.count2);
          this.ageOption.series[0].data.push(response.list.count1);
          this.genderRateOption.series[0].data = [
            { value: boy, name: "男" },
            { value: girl, name: "女" },
            { value: unknownCount, name: "未知" },
          ];

          this.drawGender();
          this.drawAge();
        })
        .catch((err) => {
          this.$message.error("网络繁忙，请稍后重试");
        });
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.infinite-list-item {
  padding: 0px;
  margin: 0px;
}
.righttop {
  width: 100%;
  height: 100%;
}
.dashboard {
  &-container {
    margin-top: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#charts {
  width: 96%;
  height: 40%;
  background-color: white;
  margin-left: 2%;
  position: absolute;
  top: 700px;
}
#count {
  position: absolute;
  left: 180px;
  top: 160px;
}
#deal {
  position: absolute;
  left: 730px;
  top: 160px;
}
#warming {
  position: absolute;
  left: 1280px;
  top: 160px;
}
#menus {
  width: 96%;
  height: 30%;
  margin-left: 2%;
  position: absolute;
  margin-top: 30px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}
#rate {
  width: 96%;
  height: 30%;
  margin-left: 2%;
  position: absolute;
  margin-top: 280px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
#adminmuns {
  width: 96%;
  height: 20%;
  margin-left: 2%;
  position: absolute;
  margin-top: 30px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}
.menu,
.hrmun {
  width: 30%;
  height: 50%;
  cursor: pointer;

  background-color: white;
}
#allCount,#backgroundItem,#evaluate{
  display: inline;  
  position: relative;
  bottom: 40px;
  left: 20px;
}
#ganderRate,
#ageRate {
  width: 40%;
  height: 96%;
  background-color: white;
}
#ageRate {
  width: 50%;
}
#approve {
  width: 96%;
  height: 50%;
  margin-left: 2%;
  background-color: white;
  position: absolute;
  top: 33%;
  padding-bottom: 40px;
}
.infinite-list {
  margin-bottom: 20px;
  overflow: auto;
  height: 70%;
  position: absolute;
  width: 100%;
  bottom: 0px;
  list-style: none;
}
.dashboard-container {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  height: 140%;
  background-color: rgb(246, 249, 255);
}

.infinite-list li {
  text-align: left;
  display: block;
  line-height: 60px;
  width: 90%;
  margin: auto;
  height: 60px;
  padding: 0;
  border-radius: 10px;
  margin-top: 20px;
  background-color: rgb(232, 243, 254);
}
.approve {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 20px;
  position: relative;
  padding-left: 100px;
  top: 20px;
}
.editapprove {
  position: relative;
  left: 90%;
  top: -60px;
}
#rightform {
  width: 280px;
  height: 500px;
  position: absolute;
  left: 450px;
  top: 80px;
}
#countNumber {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  background-image: linear-gradient(-90deg, yellow, red);
  position: absolute;
  left: 420px;
  color: white;
  top: 160px;
}
#warmingNumber {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  background-image: linear-gradient(-90deg, yellow, red);
  position: absolute;
  left: 1500px;
  color: white;
  top: 160px;
}
#dealNumber {
  color: white;
  top: 160px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  background-image: linear-gradient(-90deg, yellow, red);
  position: absolute;
  left: 960px;
}
.menuImage {
  margin-top: 20px;
  margin-left: 30px;
}

</style>
